<template>
  <div class="tag-detail">
    <tag-sidebar></tag-sidebar>
    <div class="tag-detail">
      <!--<div class="tag-header">-->
        <!--<div class="search-related">-->
          <!--&lt;!&ndash;<Input placeholder="搜索笔记..." style="width: 100%"></Input>&ndash;&gt;-->
        <!--</div>-->
        <!--<div class="operation">-->
          <!--<Button @click="doUpdateTag(currentTag)" type="primary" size="small">-->
            <!--<Icon type="play"></Icon>-->
            <!--保存-->
          <!--</Button>-->
          <!--<Button :disabled="!isRichText" @click="changeEditMarkdown" type="success" size="small">-->
            <!--<span v-if="!isEdit">-->
              <!--<Icon type="paper-airplane"></Icon>-->
              <!--转Markdown-->
            <!--</span>-->
            <!--<span v-else>-->
              <!--<Icon type="edit"></Icon>-->
              <!--使用Markdown编辑-->
            <!--</span>-->
          <!--</Button>-->
          <!--<Button @click="doDeleteTag" type="error" size="small">-->
            <!--<Icon type="trash-b"></Icon>-->
            <!--删除-->
          <!--</Button>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="tag-content">-->
        <!--<div class="date-related">-->
          <!--<Alert banner class="date-banner" type="success">-->
            <!--<span class="create-time">创建时间: {{ _formatDate(currentTag.createdTime) }} ({{ _fullDate(currentTag.createdTime) }})</span>-->
            <!--<span class="update-time">更新时间: {{ _formatDate(currentTag.modifiedTime) }} ({{ _fullDate(currentTag.modifiedTime) }})</span>-->
            <!--<span class="tag-status">状态: {{ statusText }}</span>-->
          <!--</Alert>-->
        <!--</div>-->
        <!--<div class="tag-title">-->
          <!--<input :disabled="isEdit" type="text" v-model:value="currentTag.name" class="title-input"-->
                 <!--placeholder="输入笔记标题">-->
        <!--</div>-->
        <!--<div class="tag-editor">-->
          <!--&lt;!&ndash; <textarea v-if="!isEdit" class="editor-content" placeholder="输入笔记内容" v-model:value="currentTag.content"></textarea>-->
          <!--<div class="tag-content" v-html="editText2Html" v-else></div> &ndash;&gt;-->
          <!--<i-editor class="ii-editor" v-model="currentTag.content"></i-editor>-->
        <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  import TagSidebar from '../../components/TagSidebar.vue'
  import {friendlyDate} from '../../common/js/date.js'
  import {mapState} from 'vuex'
  import MarkdownIt from 'markdown-it'
  import {getPrincipalInStore} from "../../common/js/auth";

  let md = new MarkdownIt();

  export default {
    name: 'TagDetail',
    components: {
      TagSidebar,
    },
    created() {
      console.log('笔记组件加载中...');
      this.$Loading.start();
      let principal = getPrincipalInStore();
      if (!principal) {
        this.$Message.error('没有权限-请先登录');
        this.$router.push('/login');
      } else {
        this.$store.commit('changeIsLogin', true);
        this.$store.commit('setUser', principal);
        this.$store.commit('setUsername', principal.username);
        this.$Loading.finish();
      }
    },
    data() {
      return {
        isEdit: true,
        statusText: '已完成',
        isRichText: true,
        editorContent: '',
        content: ''
      }
    },
    computed: {
      ...mapState([
        'currentTag',
        'allTags'
      ]),
      editText2Html() {
        if (this.isEdit) {
          return md.render(this.currentTag.content)
        } else if (this.isRichText) {
          return this.$store.state.richText;
        }
      }
    },
    methods: {
      _formatDate(dateStr) {
        return friendlyDate(dateStr)
      },
      _fullDate(dateStr) {
        return dateStr;
      },
      changeEditMarkdown() {
        this.isEdit = !this.isEdit;
        if (!this.isEdit) {
          this.statusText = '编辑中'
        } else {
          this.statusText = '已完成'
        }
      },
      changeEditRich() {
        this.isRichText = !this.isRichText;
        if (!this.isRichText) {
          this.statusText = '编辑中'
        } else {
          this.statusText = '已完成'
        }
      },
      // 更新笔记内容
      doUpdateTag(tag) {
        this.putRequest(this.$urlApi.UPDATE_NOTE, tag).then(res => {
          console.log(res);
          this.statusText = '已保存';
        }).catch(err => {
          console.log(err);
        });
      },

      doDeleteTag() {
        let param = {'id': this.$route.query.tagId};
        this.postJSON(this.$urlApi.DISABLE_NOTE, param).then(res => {
          let tempTags = [...this.allTags];
          let iIndex = -1;
          tempTags.forEach((item, index) => {
            if (item.id === this.$route.query.tagId) {
              iIndex = index
            }
          });
          tempTags.splice(iIndex, 1);
          this.$store.commit('setAllTags', tempTags);
          this.$router.push(`/tag?tagId=${this.$route.query.tagId}`)
        }).catch(err => {
          console.log(err);
        })
      }
    },
  }
</script>

<style lang="stylus" scoped>
  @import '../../common/stylus/variables.styl';

  .tag-detail >>> .ivu-input
    height 400px

  .tag-detail
    width 100%
    height 100%
    display flex
    align-items stretch
    overflow hidden

    .choose-tag
      font-size 40px
      text-align center
      padding 20px

    .tag-detail
      flex 1
      height 100%

      .tag-header
        display flex
        justify-content space-between
        align-items center
        padding 10px 20px
        border-bottom 1px solid $line-color
        font-size 14px

        .search-related
          width 40%

      .tag-content
        height 100%

        .date-related
          .update-time
            margin-left 10px

          .tag-status
            margin-left 10px

        .tag-title
          .title-input
            width 100%
            padding 10px 20px
            font-size 18px
            font-weight 700
            outline none
            border none

        .tag-editor
          height 100%

          .editor-content
            width 100%
            height 75%
            padding 20px
            font-size 14px
            color #333
            border 1px dotted $theme-color
            outline none
            line-height 20px
            resize none

          .tag-content
            padding 20px
            line-height 20px
</style>
